import { Card, CardProps } from 'antd';
import styles from './index.less';
import React from 'react';
import Value from './Value';
import Trend from './Trend';

type TradeCardProps = {
  loading?: boolean;
  titleName?: React.ReactNode;
  titleBar?: React.ReactNode;
  action?: React.ReactNode;
  contentLeft?: number;
  contentRight?: number;
  magnify: boolean;
  unit?: React.ReactNode;
} & CardProps;

export default (props: TradeCardProps) => {
  const renderContent = () => {
    const { loading, titleName, titleBar, action, contentLeft, contentRight, unit, magnify } =
      props;

    if (loading) {
      return false;
    }
    return (
      <div className={styles.TradeCard}>
        <div className={styles.title}>
          <div className={styles.titleName}>
            {titleName}
            <span className={styles.action}>{action}</span>
          </div>
          <div className={styles.titleBar}>{titleBar}</div>
          <div className={styles.content}>
            <div className={styles.contentLeft}>
              <Value value={contentLeft} unit={unit} />
              {/* <span className={styles.title}>{3}</span>
              <span className={styles.action}>{action}</span> */}
            </div>
            <div className={styles.contentRight}>
              <Trend trend={contentRight} magnify={magnify} />
            </div>
          </div>
        </div>
      </div>
    );
  };

  const { loading = false, ...rest } = props;
  return (
    <>
      <Card
        loading={loading}
        style={{ borderRadius: 12, height: 264 }}
        bodyStyle={{ padding: '20px 24px 20px 24px' }}
        {...rest}
      >
        {renderContent()}
      </Card>
    </>
  );
};
